<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="renderer" content="webkit" />
    <title>环贸ICD</title>
    <link href="style/index.css" rel="stylesheet" type="text/css"/>
    <link href="style/phone.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="script/wow/animate.min.css">
    <script type="text/javascript" src="script/jquery-1.7.1.min.js"></script>
</head>

<body>
<div class="loading">
    <div class="container">
        <div class="img">
            <div><img src="image/img530.jpg" alt=""></div>
        </div>
        <div class="line"><i></i></div>
        <a href="javascript:;" class="btn">立即进入</a>
    </div>
</div>

<div class="g-head">
    <div class="wal">
        <a href="" class="logo"></a>
        <a href="javascript:;" class="navA"></a>
        <div class="g-nav">
            <ul>
                <li><a href="" class="name">主页</a></li>
                <li><a href="" class="name">精彩活动</a></li>
                <li><a href="" class="name on">零售业态</a></li>
                <li><a href="" class="name">餐饮业态</a></li>
                <li><a href="" class="name">生活业态</a></li>
                <li><a href="" class="name">礼宾服务</a></li>
                <li><a href="" class="name">关于项目</a></li>
            </ul>
        </div>
        <div class="side">
            <ul class="btn">
                <li><a href="javascript:;" class="on" id="audio"><img src="image/img43_1.png" alt=""><img src="image/img43_1on.png" alt=""></a><audio id="myAudio" src="image/icd.mp3" autoplay></audio></li>
                <li class="search">
                    <a href="javascript:;"><img src="image/img43_2.png" alt=""></a>
                    <div class="form">
                        <div class="input"><input type="text"></div>
                        <div class="submit"><input type="button" value=""></div>
                    </div>
                </li>
                <li><a href=""><img src="image/img43_3.png" alt=""><img src="image/img43_3on.png" alt=""></a></li>
                <li><a href=""><img src="image/img43_4.png" alt=""><img src="image/img43_4on.png" alt=""></a></li>
            </ul>
            <dl class="btn">
                <dd><a href="" class="on">简体</a></dd>
                <dd><a href="">繁体</a></dd>
                <dd><a href="">EN</a></dd>
            </dl>
        </div>
    </div>
</div>

<div class="p-banner">
    <div class="bg" style="background-image: url('image/p-banner2.jpg')"></div>
</div>
<div class="shop-nav">
    <a href="" class="back">返回列表</a>
    <a href="javascript:pageLayerShow('.shop-layer');" class="btn">楼层导视</a>
</div>

<div class="shop-show">
    <div class="title">
        <div class="img"><img src="image/img260_2.png" alt=""></div>
        <p>L1 乐尚国际 B2-145</p>
    </div>
    <div class="img-list">
        <ul>
            <li><div style="background-image: url('image/img878.jpg')"></div></li>
            <li><div style="background-image: url('image/img878.jpg')"></div></li>
            <li><div style="background-image: url('image/img878.jpg')"></div></li>
        </ul>
        <div class="num">
            <em class="num-curr">1</em>
            <span class="num-total">3</span>
        </div>
    </div>
    <div class="container">
        <div class="content">
            百丽（BeLLE），取义于法语：美丽的女人。
            <br><br>
            百丽（BeLLE）是百丽国际旗下的时尚鞋履品牌，提供年轻、时尚、优雅、女性化、容易搭配的中高端鞋履产品。主要顾客群为年龄25-45岁的都市女性。百丽“百变·所以美丽”的态度是中国消费者一直认同的时尚概念。
        </div>
        <div class="list">
            <ul>
                <li><a href="">丽国际旗下的时尚鞋履品牌，提供年轻、时尚、优雅、女性化、容易</a></li>
                <li><a href="">的时尚鞋履品牌，提供年轻、时尚、优雅、女性化、容易</a></li>
            </ul>
        </div>
        <div class="msg">
            营业时间：11:00 AM - 8:00 PM<br>
            咨询电话：+86 28 2522 6123<br>
            官方网站：www.belle.com.cn
        </div>
    </div>
</div>
<script>
    $(function () {
        new swiperFun({
            dom: $('.shop-show .img-list')
        });
        new swiperFun({
            dom: $('.shop-show .list'),
            direction: 'vertical',
            autoplay: 6000
        })
    })
</script>

<div id="app">
    <div class="shop-show2">
        <div class="title">
            <h2>商户位置</h2>
            <div><a href="">女士时装</a>/<a href="">男士时装</a>/<a href="">家居布置</a></div>
        </div>
        <div class="img">
            <div class="svg-box">
                <div><img src="image/img1600_1.png" alt=""></div>
                <svg width="100%" viewBox="0 0 1600 710" xmlns="http://www.w3.org/2000/svg">
                    <!--背景图-->
                    <image v-bind:xlink:href="shopCurr.floorImg" width="1600" height="710" x="0" y="0"></image>
                    <!--店铺------------------->
                    <template v-for="(item, index) in shopCurr.data">
                        <g class="shop" :class="{'on':item2.selected}" v-for="(item2, index) in item.list" :data-id="item2.id" @mousemove.prevent="tipsShow(item2.name, item2.info, $event)" @mouseout.prevent="tipsHide()">
                            <path v-if="item2.path" :fill="item2.color" :d="item2.path"></path>
                            <polygon v-if="item2.polygon" :fill="item2.color" :data-name="item2.name" :points="item2.polygon"></polygon>
                            <image v-if="item2.logo" :xlink:href="item2.logo.img" :width="item2.logo.w" :height="item2.h" :x="item2.logo.x" :y="item2.logo.y"></image>
                        </g>
                    </template>

                    <!--标志-->
                    <template v-for="item in shopCurr.zhishi">
                        <image v-bind:xlink:href="item.img" width="25" height="25" :x="item.x" :y="item.y"></image>
                    </template>

                    <!--当前位置-->
                    <image v-if="shopCurr.currPosition" xlink:href="image/img72.png" width="72" height="89" :x="shopCurr.currPosition[0]" :y="shopCurr.currPosition[1]"></image>
                </svg>
            </div>
        </div>
        <div class="p-more"><a href="javascript:pageLayerShow('.shop-layer');">查看详细位置</a></div>
    </div>
    <div class="p-layer shop-layer">
        <div class="p-layer-bg" onclick="pageLayerHide()"></div>
        <div class="container">
            <div class="container-line">
                <div class="side-btn">
                    <ul>
                        <li><a href="javascript:;" :class="{'on':shop.floor=='L5'}">L5</a></li>
                        <li><a href="javascript:;" :class="{'on':shop.floor=='L4'}">L4</a></li>
                        <li><a href="javascript:;" :class="{'on':shop.floor=='L3'}">L3</a></li>
                        <li><a href="javascript:;" :class="{'on':shop.floor=='L2'}" @click="getData('shopL2.json')">L2</a></li>
                        <li><a href="javascript:;" :class="{'on':shop.floor=='L1'}" @click="getData('shop.json')">L1</a></li>
                    </ul>
                </div>
                <div class="shop-box">
                    <div id="shop">
                        <div class="svg-box">
                            <div><img src="image/img1600_1.png" alt=""></div>
                            <svg width="100%" viewBox="0 0 1600 710" xmlns="http://www.w3.org/2000/svg">
                                <!--背景图-->
                                <image v-bind:xlink:href="shop.floorImg" width="1600" height="710" x="0" y="0"></image>
                                <!--店铺------------------->
                                <template v-for="(item, index) in shop.data">
                                    <g class="shop" :class="{'on':item2.selected}" v-for="(item2, index) in item.list" :id="item2.id" @mousemove.prevent="tipsShow(item2.name, item2.info, $event)" @mouseout.prevent="tipsHide()">
                                        <path v-if="item2.path" :fill="item2.color" :d="item2.path"></path>
                                        <polygon v-if="item2.polygon" :fill="item2.color" :data-name="item2.name" :points="item2.polygon"></polygon>
                                        <image v-if="item2.logo" :xlink:href="item2.logo.img" :width="item2.logo.w" :height="item2.h" :x="item2.logo.x" :y="item2.logo.y"></image>
                                    </g>
                                </template>

                                <!--标志-->
                                <template v-for="item in shop.zhishi">
                                    <image v-bind:xlink:href="item.img" width="25" height="25" :x="item.x" :y="item.y"></image>
                                </template>

                                <!--有链接-->
                                <!--<g class="shop">
                                    <a xlink:href="http://www.baidu.com"></a>
                                </g>-->
                            </svg>
                        </div>
                        <div class="tips-layer" v-if="tips.show" :style="'left:'+tips.x+'; top:'+tips.y">
                            <p>{{tips.name}}</p>
                            <p>{{tips.info}}</p>
                        </div>
                    </div>
                    <div class="control">
                        <a href="javascript:;" class="small"></a>
                        <a href="javascript:;" class="big"></a>
                    </div>
                </div>
                <div class="side">
                    <div class="form">
                        <div class="input"><input type="text" value="商户关键词"></div>
                        <div class="submit"><input type="button" value=""></div>
                    </div>
                    <div class="list">
                        <ul>
                            <li v-for="(item, index) in shop.data" :class="{'on':item.selected}">
                                <div class="name" @click="sideClassChange(index)">{{item.title}}</div>
                                <dl>
                                    <dd v-for="(item2, index2) in item.list"><a href="javascript:;" :class="{'on':item2.selected}" @click="shopSelect(item2.id)">{{item2.name}}</a></dd>
                                </dl>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!---->
<script src="script/vue/vue.js"></script>
<script src="script/vue/vue-resource.min.js"></script><!--vue ajax-->
<script>
    $(function () {
        var app = new Vue({
            el: '#app',
            data:{
                "shop":{},//--弹出层里面使用（shop, shopCurr初始值都是一样的，但弹出层里面可能会更换楼层，所以数据会变化，因为它们两个数据分别存放）
                "shopCurr":{first:true},//--详情页面里面使用
                "tips":{
                    show:false,
                    name:'',
                    info:'',
                    x:0,
                    y:0
                },
                "control": Object
            },
            mounted:function () {
                this.control = new shopControl();
                this.getData('shop.json')
            },
            computed:{},
            watch:{},
            methods:{
                //--加载场景数据
                getData: function (url) {
                    this.control.reset();
                    this.tipsHide();
                    this.$http.get(url).then(function (res) {
                        this.shop = res.body;
                        if(this.shopCurr.first){//这个条件是第一次加载数据
                            this.shopCurr = res.body
                        }
                    }, function () {
                        console.log('请求失败处理')
                    })
                },
                //--右侧切换分类
                sideClassChange:function (i) {
                    this.shop.data.forEach(function (item, index) {
                        if(i === index){
                            item.selected = !item.selected
                        }else{
                            item.selected = false
                        }
                    })
                },
                //--右侧选择商铺
                shopSelect:function(id){
                    var that = this,
                        tips = that.tips;
                    this.shop.data.forEach(function (item) {
                        item.list.forEach(function (item2) {
                            if(item2.id === id){
                                item2.selected = true;
                                tips.x = item2.tipsPosition[0] / 16 + '%';
                                tips.y = item2.tipsPosition[1] / 7.1 + '%';
                                that.tipsShow(item2.name, item2.info);

                                /*var scale = that.control.scale;
                                that.control.reset();
                                var el = document.getElementById(item2.id);
                                var rect = el.getBoundingClientRect();
                                var x = $('#shop').width()/2 + $('#shop').offset().left - rect.x - rect.width/2,
                                    y = $('#shop').height()/2 + $('#shop').offset().top - rect.y - rect.height/2 - $(window).scrollTop();
                                $('#shop').css({
                                    'left': x,
                                    'top': y
                                });
                                $('#shop').css({
                                    'width': scale * 100 + '%'
                                });
                                that.control.scale = scale;
                                that.control.currPosition.x = x;
                                that.control.currPosition.y = y;
                                that.control.touchPosition.x = x;
                                that.control.touchPosition.y = y;*/
                            }else{
                                item2.selected = false
                            }
                        })
                    })
                },
                //--提示文字及位置
                tipsShow:function(name, info, event){
                    var _ = this.tips;
                    if(event !== undefined){
                        _.x = event.offsetX + 'px';
                        _.y = event.offsetY + 'px';
                        this.shopSelect()
                    }
                    _.name = name;
                    _.info = info;
                    _.show = true
                },
                tipsHide:function(){
                    this.tips.show = false
                }
            }
        })
    })
</script>

<div class="shop-foot">
    <div class="wal" style="height: 3.28rem">
        <div class="title">了解精彩纷呈的环贸iCD</div>
        <div class="p-more"><a href="">查看更多</a></div>
    </div>
</div>

<div class="g-foot">
    <div class="list"><a href="">联系我们</a>/<a href="">加入我们</a>/<a href="">免责声明</a></div>
    <div class="col">
        <p>Copyright © 2020 祥宝投资（成都）有限公司</p>
        <p>All Rights Reserved   Power by GuideBrand</p>
    </div>
</div>

</body>
</html>

<script type="text/javascript" src="script/js.js"></script>
<link rel="stylesheet" href="script/swiper/swiper-3.4.2.min.css">
<script type="text/javascript" src="script/swiper/swiper-3.4.2.jquery.min.js"></script>
<script type="text/javascript" src="script/wow/wow.min.js"></script>